<template>
  <!--所有标签都必须写在一个div中 -->
  <div id="container">
    <el-row>
    <h1><i class="el-icon-sunny"></i>{{sysname}}</h1>
    </el-row>
    <el-row>
      <el-button type="primary" @click="toadd" icon="el-icon-search">添加</el-button>
    </el-row>
    <el-row>
      <el-table :data="list" style="width: 100%;">
      <el-table-column prop="title"label="标题" width="280" header-align="center"/>
      <el-table-column prop="sellpoint"label="卖点" width="200" header-align="center"/>
      <el-table-column prop="price"label="价格" align="right" width="100" header-align="center"/>
      <el-table-column prop="intro"label="说明"  align="center" header-align="center"/>
      <el-table-column label="[操作]" width="220" header-align="center" >
        <template slot-scope="s">
          <!-- 两个参数，第一个参数当前索引值，第二个参数当前行数据 -->
       <el-button type="success" @click="toupdate(s.$index,s.row)" icon="el-icon-check">修改</el-button>
        <el-button type="danger" @click="del(s.$index)"icon="el-icon-close">删除</el-button>
        </template>
         </el-table-column>
      </el-table>
    </el-row>

<!--怎么控制对话框是否展现？dislogVisible布尔变量true展现，false关闭
   变量要在 数据去声明的
   v-bind:visible 属性element-ui检查属性，设置是否展现div，display:none
-->
    <el-dialog title="提示" :visible.sync="dialogVisible"   width="30%">
      <span>
        <el-form :model="m" label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="m.title"/>
          </el-form-item>
          <el-form-item label="卖点">
            <el-input v-model="m.sellpoint"/>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="m.price"/>
          </el-form-item>
          <el-form-item label="说明">
            <el-input v-model="m.intro"/>
          </el-form-item>
          </el-form>
      </span>
      <span slot="footer"class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button @click="save">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  //这个数据区,只允许本组件使用
  export default{
    name:"Item",
    data() {
      return {
        sysname:"京东电商平台",
        dialogVisible:false,//负责对话框是否展现
        isUpdate:false,//新增按钮设置false，修改按钮true，有了这个值，save方法就知道新增还是修改
        index:null,//全局变量，代表当前的索引值
        m:{ //临时存放一条数据结构model，pojo
          title:'',
          sellpoint:'',
          price:0,
          intro:''
        },
        list:[
          {
            title:"1",sellpoint:"2",price:100,intro:"3",
            },
          {
            title:"java入门手册",sellpoint:"达内出品",price:88,intro:"经典入门书籍，18年修炼",
            },
          {
            title:"1",sellpoint:"2",price:100,intro:"3",
            },
          {
            title:"1",
            sellpoint:"2",
            price:100,
            intro:"3",
            },
        ]
      }
    },
    methods:{
      toadd : function(){
        //防止数据已经有值，干扰，清空数据
        this.m={};
        //展现对话框  要调用数据区中数据，加this
        this.dialogVisible = true;
        this.isUpdate=false;
      },
      toupdate: function(index,row){
       //获取当前数据,回显，对话框中数据form表单，表单是和m绑定
      // this.m=row;//row和m是一个引用！！一个改全都改。解决办法；把它们关系取消,不是同一个引用
      this.m=JSON.parse(JSON.stringify(row));//m和row就没有关系了

       this.dialogVisible=true;
       this.isUpdate=true;
       this.index=index;//前面的index是全局参数，数据区中定义的；后面index是toupdate的参数
      },
      save: function(){//这个方法复用，新增和修改都是用它
     // alert(123);
      if(!this.isUpdate){//!取反，！true=false,!false=true;
        //在list数组中新增元素
        this.list.splice(0,0,this.m);
      }else{
        //修改 index怎么来？在修改按钮通过插槽传入index，可以设置全局变量，来记录这个值
        //1.数据区：index变量  2。修改按钮，设置index，3.在这获取数据区index
        this.list.splice(this.index,1,this.m);
      }
        this.dialogVisible=false;
        this.m = {};      //修改完成后，再次清空数据
      },
      del:function(index){
         //通过插槽vue+element-ui提供，它就把index索引值传递过来
         //删除指定数组的索引值，删除1个
      this.list.splice(index,1);
      }
    }
  }
</script>

<style>
  /* 这个字体不一致，是element-ui自己的问题，手工设置微软雅黑字体 */
  textarea{
    font-family:"微软雅黑";
  }
</style>
